// 提供项目需要的工具函数,可以复用的逻辑封装

import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'

// 数据懒加载函数---------------------------------------------------
// useLazyDateFn作用是懒加载api,只在第一次元素进入可视区域的时候发送api
// apiFn调用的接口函数
export const useLazyDateFn = (apiFn) => {
  const target = ref(null)
  const list = ref([])
  const { stop } = useIntersectionObserver(
    // 需要观察的元素，通过ref获取的DOM元素或组件
    target,
    // isIntersecting 是否进入可视区 observerElement 被观察的元素
    async ([{ isIntersecting }]) => {
      // targetIsVisible.value = isIntersecting
      if (isIntersecting) {
        // console.log('进入可是区域了')
        const data = await apiFn()
        // console.log(data)
        list.value = data.result
        // 第一次进入发请求,以后就可以停止观察了
        stop()
      }
    }
  )

  return { target, list }
}
// 调用示例
// vue中script使用:
// const { target, list } = useLazyDateFn(() => getBrandAPI(10))
// vue中tempale使用:
// 在要被观察的对象标签上加ref="target"
// 数据懒加载函数 over ---------------------------------------------------
